<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery自定义拖拽</title>
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="./js/jquery-hjDrag-1.0.0.1.js"></script>
    <style>
		body{padding: 0px;margin: 0px;}
.m {
	width: 1000px;
	height: 600px;
	border: 1px solid #E5E5E5;
}
.box {
	width: 200px;
	height: 200px;
	background-color: #E7E7E7;
}
.box:hover {
	cursor: pointer;
}
.box h3 {
	text-align: center;
	margin: 0;
	background-color: #2E3FA2;
	color: aliceblue
}
.box p {
	text-align: center;
}
#box3 {
	top: 200px;
}
</style>
    </head>
    <body>
<div class="m"></div>
<div class="box" id="box1">
      <h3>title1</h3>
    </div>
<div class="box" id="box2">
      <h3>title2</h3>
      <p>任意拖拽</p>
    </div>
<div class="box" id="box3">
      <h3>title3</h3>
      <p>拖拽范围限制在800x400</p>
    </div>
<script>
        $("#box1").hjDrag({})
        $("#box2").hjDrag({titleSelector:"h3"})
        $("#box3").hjDrag({
            titleSelector:"h3",
            left:0,
            up:0,
            right:800,
            down:400
        })
    </script>
</body>
</html>